Tooltip একটি ছোট পপ-আপ বাক্স যা ব্যবহারকারী যখন কোনো উপাদানে মাউস হভার করে তখন প্রদর্শিত হয়। এটি সাধারণত একটি আইকন, লিঙ্ক বা বাটনের উপর সহায়ক তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Angular Material এর MatTooltip কম্পোনেন্ট ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়।

টুলটিপ তৈরি করার ধাপ

১. MatTooltipModule ইমপোর্ট করা

প্রথমে, আপনাকে MatTooltipModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে অন্তর্ভুক্ত করতে হবে।

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    MatTooltipModule
  ]
})
export class AppModule { }

২. HTML এ টুলটিপ ব্যবহার করা

এখন, matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ তৈরি করা যাবে। আপনি যেকোনো HTML উপাদানের উপর টুলটিপ যোগ করতে পারেন। উদাহরণস্বরূপ:

<button mat-raised-button matTooltip="Click me to perform an action">Hover to see Tooltip</button>

এখানে matTooltip ডিরেকটিভের মধ্যে টুলটিপের টেক্সট দেয়া হয়েছে। যখন ব্যবহারকারী বাটনের উপরে মাউস হভার করবেন, তখন এটি প্রদর্শিত হবে।

৩. টাইপস্ক্রিপ্টে টুলটিপ কনফিগার করা

আপনি চাইলে টুলটিপের মান এবং প্রদর্শনের সময় কনফিগারেশন টাইপস্ক্রিপ্ট থেকে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, টুলটিপ দেখানোর জন্য নির্দিষ্ট সময় সেট করা যেতে পারে।

<button mat-raised-button [matTooltip]="tooltipMessage" matTooltipShowDelay="500" matTooltipHideDelay="200">
  Hover me
</button>

এখানে:

• matTooltipShowDelay: টুলটিপ প্রদর্শনের বিলম্ব সময় (মিলিসেকেন্ডে)।
• matTooltipHideDelay: টুলটিপ আড়াল করার বিলম্ব সময় (মিলিসেকেন্ডে)।

এবং টাইপস্ক্রিপ্টে:

export class AppComponent {
  tooltipMessage = 'This is a tooltip message';
}

৪. টুলটিপের অবস্থান কাস্টমাইজ করা

Angular Material এর টুলটিপ বিভিন্ন অবস্থানে প্রদর্শিত হতে পারে, যেমন উপরের, নিচের, ডানে বা বামে। আপনি matTooltipPosition প্রপার্টি ব্যবহার করে এটি কাস্টমাইজ করতে পারেন:

<button mat-raised-button matTooltip="Tooltip on the top" matTooltipPosition="above">
  Hover me for top tooltip
</button>

<button mat-raised-button matTooltip="Tooltip on the right" matTooltipPosition="right">
  Hover me for right tooltip
</button>

অবস্থান বিকল্পগুলি হল:

• above: টুলটিপ বাটনের উপরে।
• below: টুলটিপ বাটনের নিচে।
• left: টুলটিপ বাটনের বামে।
• right: টুলটিপ বাটনের ডানে।

৫. টুলটিপ স্টাইলিং

আপনি চাইলে টুলটিপের স্টাইলও কাস্টমাইজ করতে পারেন CSS এর মাধ্যমে। এটি টুলটিপের ব্যাকগ্রাউন্ড, ফন্ট, প্যাডিং ইত্যাদি পরিবর্তন করতে সাহায্য করবে।

::ng-deep .mat-tooltip {
  background-color: #ff4081; /* টুলটিপ ব্যাকগ্রাউন্ড রং */
  color: white; /* টুলটিপ টেক্সট রং */
  font-size: 14px; /* টুলটিপের ফন্ট সাইজ */
  padding: 8px; /* প্যাডিং */
}

৬. ডাইনামিক টুলটিপ কনটেন্ট

আপনি চাইলে টুলটিপের কনটেন্ট ডাইনামিকভাবে কনফিগার করতে পারেন। উদাহরণস্বরূপ, টুলটিপের মান পরিবর্তন করা যাবে টাইপস্ক্রিপ্টের মাধ্যমে:

<button mat-raised-button [matTooltip]="dynamicTooltip">
  Hover me for dynamic tooltip
</button>

export class AppComponent {
  dynamicTooltip = 'This tooltip content is dynamic!';

  changeTooltip() {
    this.dynamicTooltip = 'The tooltip content has changed!';
  }
}

এখানে, changeTooltip() মেথডটি টুলটিপের কনটেন্ট পরিবর্তন করে।

টুলটিপের অন্যান্য বৈশিষ্ট্য

• matTooltipClass: টুলটিপের জন্য একটি CSS ক্লাস অ্যাসাইন করা যায়, যাতে আপনি টুলটিপের স্টাইল আরও কাস্টমাইজ করতে পারেন।

  <button mat-raised-button matTooltip="Custom styled tooltip" matTooltipClass="custom-tooltip">
    Hover me
  </button>
  

  .custom-tooltip {
    background-color: #3f51b5;
    color: #fff;
    font-weight: bold;
  }
  

• matTooltipDisable: যদি আপনি টুলটিপকে কিছু শর্তে নিষ্ক্রিয় করতে চান, তবে এটি ব্যবহার করা যেতে পারে।

  <button mat-raised-button [matTooltip]="tooltipMessage" [matTooltipDisabled]="isTooltipDisabled">
    Hover me
  </button>
  

  export class AppComponent {
    isTooltipDisabled = true;
    tooltipMessage = 'This tooltip is disabled';
  }
  

Angular Material Tooltip ব্যবহার করা সহজ এবং এটি অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে সহায়ক তথ্য প্রদর্শনের জন্য একটি কার্যকর উপায়। আপনি matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ কনটেন্ট কাস্টমাইজ, অবস্থান পরিবর্তন, এবং স্টাইলিং করতে পারেন। এর মাধ্যমে আপনি একটি সুন্দর এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য আরও সহজবোধ্য ও অ্যাক্সেসযোগ্য হয়।

Angular Material এর MatTooltip কম্পোনেন্ট একটি সোজা এবং সহজ উপায়ে টুলটিপ প্রদর্শন করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা কোনো উপাদানের উপর হোভার করার সময় অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক। টুলটিপ সাধারণত একটি ছোট ব্যাখ্যা বা নির্দেশনা প্রদর্শন করার জন্য ব্যবহার হয়।

টুলটিপ ব্যবহারের জন্য পদক্ষেপ

১. MatTooltipModule ইমপোর্ট করা

প্রথমে, MatTooltipModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    MatTooltipModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে টুলটিপ ব্যবহার করা

এখন আপনি matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ তৈরি করতে পারেন। এটি সাধারণত HTML ট্যাগে ব্যবহার করা হয়, যেখানে আপনি টুলটিপের কনটেন্ট বা তথ্য দিন।

<button mat-raised-button matTooltip="This is a tooltip">Hover over me</button>

এখানে:

• mat-raised-button: Angular Material এর একটি বাটন স্টাইল।
• matTooltip: এই ডিরেকটিভ ব্যবহার করে টুলটিপের কনটেন্ট নির্ধারণ করা হয়।

৩. টুলটিপের সময় কাস্টমাইজ করা

আপনি টুলটিপের প্রদর্শনের সময় নির্ধারণ করতে পারেন যেমন এটি কতক্ষণ সময় ধরে প্রদর্শিত থাকবে, বা হোভার করলে এটি কত দ্রুত প্রদর্শিত হবে।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipShowDelay="500" matTooltipHideDelay="200">
  Hover over me
</button>

এখানে:

• matTooltipShowDelay: টুলটিপ প্রদর্শনের জন্য দেরি (ms) সেট করা হয়।
• matTooltipHideDelay: টুলটিপ বন্ধ হওয়ার জন্য দেরি (ms) সেট করা হয়।

৪. টুলটিপের অবস্থান কাস্টমাইজ করা

টুলটিপের অবস্থান কাস্টমাইজ করা সম্ভব। আপনি matTooltipPosition প্রপার্টি ব্যবহার করে টুলটিপের অবস্থান নির্ধারণ করতে পারেন।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipPosition="above">
  Hover over me
</button>

অবস্থানগুলোর মধ্যে কিছু বিকল্প:

• above: টুলটিপ বাটনের উপরে প্রদর্শিত হবে।
• below: টুলটিপ বাটনের নিচে প্রদর্শিত হবে।
• left: টুলটিপ বাটনের বামপাশে।
• right: টুলটিপ বাটনের ডানপাশে।

৫. টুলটিপ কনটেন্ট কাস্টমাইজ করা

আপনি HTML এর মধ্যে টুলটিপের কনটেন্ট কাস্টমাইজও করতে পারেন। উদাহরণস্বরূপ, আপনি অন্যান্য HTML ট্যাগ যেমন strong, em, span ইত্যাদি ব্যবহার করতে পারেন টুলটিপের কনটেন্টে:

<button mat-raised-button matTooltip="This is a <strong>bold</strong> tooltip" matTooltipPosition="below">
  Hover over me
</button>

এখানে <strong> HTML ট্যাগ টুলটিপের মধ্যে বোল্ড টেক্সট প্রদর্শন করবে।

Angular Material Tooltip একটি সোজা, সহজ এবং কাস্টমাইজযোগ্য উপায় ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদর্শন করার। এটি matTooltip ডিরেকটিভ ব্যবহার করে দ্রুতভাবে টুলটিপ তৈরি করা যায়। আপনি এর মাধ্যমে টুলটিপের প্রদর্শনের সময়, অবস্থান এবং কনটেন্ট কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

Angular Material এর MatTooltip কম্পোনেন্ট ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়, যা ব্যবহারকারীর মাউসের উপর হভার করলে কোনো উপাদান বা টেক্সট সম্পর্কে সংক্ষিপ্ত তথ্য প্রদর্শন করে। Angular Material এর টুলটিপ কাস্টমাইজ এবং পজিশন করা যায়, যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে আরও উন্নতি করতে সাহায্য করে।

MatTooltip কম্পোনেন্ট ব্যবহার করা

Angular Material-এ MatTooltip একটি সোজা পদ্ধতিতে ব্যবহার করা যায় এবং এটি কোনো উপাদান বা টেক্সটের উপর হভার করার সাথে সাথে একটি টুলটিপ দেখায়।

১. MatTooltip মডিউল ইমপোর্ট করা

প্রথমে MatTooltipModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    MatTooltipModule
  ]
})
export class AppModule { }

২. MatTooltip ব্যবহার করা

এরপর, HTML ফাইলে আপনি যেকোনো উপাদানে matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ প্রয়োগ করতে পারেন।

<button mat-raised-button matTooltip="Click to save">Save</button>

এখানে:

• mat-raised-button: এটি একটি ম্যাটেরিয়াল বাটন কম্পোনেন্ট।
• matTooltip="Click to save": এটি টুলটিপে প্রদর্শিত টেক্সট।

টুলটিপের পজিশন কাস্টমাইজেশন

MatTooltip এর পজিশন কাস্টমাইজ করা যায়, যাতে আপনি টুলটিপের অবস্থান নির্ধারণ করতে পারেন। Angular Material এর MatTooltip ডিরেকটিভে position প্রপার্টি ব্যবহার করে এটি করা যায়।

১. Position Options

Angular Material এর MatTooltip এর জন্য তিনটি প্রাথমিক পজিশন অপশন রয়েছে:

• above: টুলটিপ উপরে প্রদর্শিত হবে।
• below: টুলটিপ নিচে প্রদর্শিত হবে (ডিফল্ট পজিশন)।
• left: টুলটিপ বামে প্রদর্শিত হবে।
• right: টুলটিপ ডানে প্রদর্শিত হবে।

<button mat-raised-button matTooltip="Tooltip above" matTooltipPosition="above">Save</button>
<button mat-raised-button matTooltip="Tooltip below" matTooltipPosition="below">Save</button>
<button mat-raised-button matTooltip="Tooltip left" matTooltipPosition="left">Save</button>
<button mat-raised-button matTooltip="Tooltip right" matTooltipPosition="right">Save</button>

এখানে, matTooltipPosition এর মাধ্যমে আপনি পজিশন কাস্টমাইজ করছেন। ডিফল্ট পজিশন হচ্ছে below।

টুলটিপের কাস্টমাইজেশন

MatTooltip কম্পোনেন্টের আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যা আপনাকে টুলটিপের লুক এবং ফাংশনালিটি পরিবর্তন করতে সহায়তা করে।

১. টুলটিপের শো ডিলে (Show Delay)

matTooltipShowDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপের প্রদর্শন বিলম্ব (delay) নির্ধারণ করতে পারেন। এটি টুলটিপের প্রদর্শন বিলম্বে পরিবর্তন আনে, যেমন, ব্যবহারকারী যখন হভার করে তখন কত সময় পর টুলটিপ প্রদর্শিত হবে।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipShowDelay="500">Save</button>

এখানে, টুলটিপ 500 মিলিসেকেন্ড পরে প্রদর্শিত হবে।

২. টুলটিপের হাইড ডিলে (Hide Delay)

matTooltipHideDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপটি মুছে ফেলার বিলম্ব নির্ধারণ করতে পারেন। এটি টুলটিপের অদৃশ্য হওয়ার সময় বিলম্ব নির্ধারণ করে।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipHideDelay="1000">Save</button>

এখানে, টুলটিপ 1000 মিলিসেকেন্ড পরে অদৃশ্য হবে।

৩. টুলটিপের কন্টেন্ট কাস্টমাইজেশন

টুলটিপে কাস্টম কন্টেন্ট বা HTML উপাদান যোগ করতে চাইলে ngTemplateOutlet ব্যবহার করা যায়।

<ng-template #tooltipTemplate>
  <span>Custom Tooltip Content</span>
</ng-template>

<button mat-raised-button [matTooltip]="tooltipTemplate">Save</button>

এখানে, আপনি ng-template ব্যবহার করে কাস্টম কন্টেন্ট তৈরি করছেন এবং সেটি matTooltip এর মাধ্যমে প্রদর্শন করছেন।

৪. টুলটিপের স্টাইল কাস্টমাইজেশন

আপনি CSS বা SCSS ব্যবহার করে টুলটিপের স্টাইল কাস্টমাইজ করতে পারেন। যেমন, টুলটিপের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে:

::ng-deep .mat-tooltip {
  background-color: #ff4081;
  color: white;
  font-size: 14px;
}

এখানে, টুলটিপের ব্যাকগ্রাউন্ড কালার #ff4081 এবং টেক্সটের রং white করা হয়েছে।

টুলটিপের অটোমেটিক পজিশনিং

Angular Material এর MatTooltip কম্পোনেন্টটি অটোমেটিক পজিশনিং সমর্থন করে, যা টুলটিপের পজিশন screen boundary এর উপর ভিত্তি করে সঠিকভাবে নির্ধারণ করে। যদি আপনি টুলটিপের জন্য পজিশন সেট না করেন, তবে এটি স্বয়ংক্রিয়ভাবে সেরা পজিশন নির্বাচন করে।

<button mat-raised-button matTooltip="Auto positioned tooltip">Save</button>

এখানে, পজিশন কাস্টমাইজ না করলেই এটি স্বয়ংক্রিয়ভাবে সঠিক পজিশন (যেমন, উপরে বা নিচে) সেট করে।

Angular Material এর MatTooltip কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য টুলটিপ সমাধান প্রদান করে, যা টুলটিপের পজিশন এবং স্টাইল পরিবর্তন করতে সাহায্য করে। আপনি বিভিন্ন পজিশন (উপর, নিচ, বাম, ডান), বিলম্ব, এবং কাস্টম কন্টেন্ট সেট করতে পারেন। এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং তথ্যপূর্ণ করা সম্ভব।